<template>
	<div class="wd_wrap">
		<!-- <Header /> -->
		<NavigationBar :title="info.name"></NavigationBar>
		<div class="wd-main" id="wdWorkDetail">
			<div class="slm-load-Status" v-if="getLoadStatus() != 1">{{loadStatusText}}</div>
			<PWorkDetailInfo ref="PhoneWorkDetail" :info="info" :extInfo="extInfo" :firstCharptId="firstCharptId" :productId="productId"
			 :loadStatus="getLoadStatus()" v-if="isMobile" @collectBtnClick="collectBtnClick" />
			<PcWorkDetailInfo ref="PcWorkDetail" :info="info" :extInfo="extInfo" :firstCharptId="firstCharptId" :productId="productId"
			 :loadStatus="getLoadStatus()" v-if="!isMobile" @collectBtnClick="collectBtnClick" />
			<RecommendList :items="RelevantList"></RecommendList>
			<div class="wd-catalogue-list">
				<div class="wd-catalogue-list-nav">
					<button v-bind:class="{'wcl-nav-t-active':curSelColumn==0}" class="wcl-nav-t">章节列表
					</button>
					<div @click="clickPostiveOrReserveOrder()">
						<img  :src="getReverseOrderImage()" width="52px" height="52px"/>
					</div>
					<!-- :to="{ path: '/WorkDetail/list', query: { productId: productId,curSelColumn:0}}" -->
					<!-- <router-link v-bind:class="{'wcl-nav-t-active':curSelColumn==1}" class="wcl-nav-t" :to="{ path: '/WorkDetail/comment', query: { productId: productId,curSelColumn:1  }}">评论区</router-link> -->
				</div>
				<!-- <router-view :key='key'></router-view> -->
				<ChapterList ref="ChapterList" v-if="curSelColumn==0"></ChapterList>
				 <!-- <Comment :info="info" v-if="curSelColumn==1"></Comment> -->
			</div>
		</div>
		<!-- <Footer /> -->
	</div>

</template>

<script>
	// import Header from './pages/Header.vue'
	// import Footer from './pages/Footer.vue'
	import NavigationBar from './pages/NavigationBar.vue'
	import ChapterList from './pages/ChapterList.vue'
	import Comment from './pages/Comment.vue'
	import PWorkDetailInfo from './phone/PWorkDetailInfo.vue'
	import PcWorkDetailInfo from './pc/PcWorkDetailInfo.vue'
	import RecommendList from './phone/RecommendList.vue'
	import HttpUtil from '../js/HttpUtil.js'
	import UserInfoManager from "../js/UserInfoManager.js"


	export default {
		metaInfo() {
			return {
				title: this.info.name + '-' + '在线漫画-火漫画官方网站',
				meta: [{
						name: 'Keywords',
						content: this.info.name + '漫画,' + this.info.name + '全集,' + this.info.name + '漫画全集,' + this.info.typeName +
							'在线漫画,' + this.info.typeName + ',火漫画画,火漫画官方网站'
					}, {
						name: 'Description',
						content: this.info.desciption
					}
				]
			}
		},
		components: {
			// Header,
			// Footer,
			NavigationBar,
			PWorkDetailInfo,
			PcWorkDetailInfo,
			RecommendList,
			ChapterList,
			Comment
		},
		data() {
			let productId = this.$route.query.productId;
			console.log("首页传过来的作品Id2="+productId);
			return {
				loadStatusText: '',
				detailStatus: 0,
				productId: this.$route.query.productId,
				RelevantList: [],
				isReverseOrder: false,
				info: {
					name: "",
					desciption: "",
					thumUrl: "",
					productId: this.$route.query.productId,
					isReverseOrder: false,
				},
				extInfo: {
					isCollection: false,
					lastChapterId: 0,
					clickCount: 0,
					nextChapterId: 0
				},
				rows: 0,
				cataloguelist: [],
				isMobile: false,
				orederImgPath: "",
				curSelColumn: 0,
				firstCharptId: 0,
				
			}
		},
		mounted() {
			let productId = this.$route.query.productId;
			//let curSelColumn = this.$route.query.curSelColumn;
			console.log("首页传过来的作品Id="+productId);
			if (productId) {
				this.productId = productId;
				// this.$refs.ChapterList.reloadData(productId)
			}

			// if (curSelColumn) {
			// 	this.curSelColumn = curSelColumn;
			// }
			// console.log('当前选中：' + curSelColumn);

			this.requstdetail()
			this.requestExtensionInfo()
			if (this._isMobile()) {
				this.isMobile = true;
				console.log('是手机')
			} else {
				console.log('是PC')
				this.isMobile = false;
			}
		},
		methods: {
			getReverseOrderImage: function () {
				if (this.isReverseOrder) {
					return require("../resources/images/comm/detail_reserve.png")
				}else {
					return require("../resources/images/comm/detail_sequence.png")
				}
			},
			requstdetail: function() {
				var params1 = new URLSearchParams();
				let productId = this.productId
				if (productId) {
					params1.append('productId', productId);
				}
				let that = this
				//详情
				HttpUtil.post('product/detail.do', params1)
					.then(response => {
						// console.log('详情：' + JSON.stringify(response.data));

						if (response.data.code == 0) {
							let data = response.data.data;
							let info = data.info;
							that.RelevantList = data.RelevantList
							that.info = info;
							that.detailStatus = 1;
							that.firstCharptId = data.firstCharptId;
							// that.info.isReverseOrder = false;
							that.$refs.ChapterList.updateInfo(this.info)
							//document.title = this.info.name;

						} else {
							that.detailStatus = -1;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.detailStatus = -1;
					});
			},
			requestExtensionInfo: function() {
				if (!UserInfoManager.isLogined()) { //未登录
					return;
				}
				let that = this;
				let sessionKey = UserInfoManager.getInfo().userExt.sessionKey
				var params = new URLSearchParams();
				params.append('sessionkey', sessionKey);
				params.append('productId', this.productId);

				HttpUtil.post("product/extensionInfo.do", params)
					.then(response => {
						console.log("获取到扩展信息" + JSON.stringify(response.data));
						if (response.data.code == 0) {
							that.extInfo = response.data.data
							if (that.isMobile) {
								that.$refs.PhoneWorkDetail.updateExtInfo(that.extInfo)
							} else {
								that.$refs.PcWorkDetail.updateExtInfo(that.extInfo)
							}
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			collectBtnClick: function(isCollect) {
				console.log("点击是否收藏：" + isCollect)
				if (!UserInfoManager.isLogined()) { //未登录
					alert("请先登录");
					return;
				}

				let that = this;
				let sessionKey = UserInfoManager.getInfo().userExt.sessionKey
				var params = new URLSearchParams();
				params.append('sessionKey', sessionKey);
				params.append('productId', this.productId);
				//params.append('chpterId', '');
				//收藏与取消收藏
				let url = isCollect ? "collections/add.do" : "collections/delete.do"

				console.log("收藏作品:" + params + "productId" + this.productId);
				HttpUtil.post(url, params)
					.then(response => {
						console.log(JSON.stringify(response.data));
						if (response.data.code == 0) {
							var extInfo = that.extInfo
							extInfo.isCollection = isCollect
							that.extInfo = extInfo
							console.log("重新赋值后：" + JSON.stringify(that.extInfo));
							if (that.isMobile) {
								that.$refs.PhoneWorkDetail.updateExtInfo(that.extInfo)
							} else {
								that.$refs.PcWorkDetail.updateExtInfo(that.extInfo)
							}
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getLoadStatus: function(curRow) {
				if (this.detailStatus == 0) {
					this.loadStatusText = '正在努力加载···'
					return 0; //正在加载
				} else if (this.detailStatus == 1) {
					this.loadStatusText = ''
					return 1; //加载完成
				} else {
					this.loadStatusText = 'o(╥﹏╥)o  加载失败!，请刷新页面'
					return 2; //部分加载完成
				}
			},
			getColums: function(curRow) { //获取某一行有几列

				let needAll = curRow * 4 + 4;
				let interval = needAll - this.cataloguelist.length;
				var colums = interval > 0 ? (4 - interval) : 4;
				if (colums < 0) colums = 0;
				return colums;
			},
			getChapterIndex: function(curRow, curColumn) { //获取是数组的第几个

				let result = curRow * 4 + curColumn;

				return result;
			},
			getChapterData: function(curRow, curColumn) { //获取某个章节信息
				let index = this.$options.methods.getChapterIndex(curRow, curColumn);
				let data = {
					id: 0,
					name: ''
				};
				if (index < this.cataloguelist.length) {
					data = this.cataloguelist[index];
				}

				return data;
			},
			clickPostiveOrReserveOrder: function() {
				console.log('index==='+this.isReverseOrder);
				let newStatus = !this.isReverseOrder;
				this.isReverseOrder = newStatus	
				// this.info.isReverseOrder = this.isReverseOrder;
				console.log('isReverseOrder==='+this.isReverseOrder);
				this.info.isReverseOrder = this.isReverseOrder
				this.$refs.ChapterList.updateInfo(this.info);
					
			},
			_isMobile() {
				console.log('测试。。。。')
				console.log(navigator.userAgent)
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			}
		},
		beforeRouteLeave(to, from, next) {
			//console.log("to:"+JSON.stringify(to))
			//离开路由到首页，首页不能刷新
			if (to.path == '/' || to.path == '/Home') {
				to.meta.isUseCache = true;
				console.log('首页需要使用缓存数据')
			} else {
				console.log('首页不需要使用缓存数据')
			}
			next();
		},
		computed: {
			key() {
				return this.$router.path + Math.random();
			}
		}
	}
</script>

<style>
	@import "../css/WorkDetails.css";
</style>
